<template>
  <div class="myInput">
    <input type="text" placeholder="待办事项" v-model="textVal"/>
    <button :style="{background:$store.state.itemColor}" @click="add">提交</button>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props,{emit}) {
     const data = reactive({
       textVal:''
     })
     const add = () =>{
        emit('add',data.textVal);
        data.textVal = '';
     }
     return{
       ...toRefs(data),
       add
     }
  },
};
</script>
<style lang="scss" scoped>
.myInput {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
  input {
    width: 70%;
    height: 50px;
    border-radius: 6px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  button {
    height: 52px;
    border-radius: 6px;
    border: none;
    background: pink;
    width: 80px;
    color: #ffff;
    font-size: 18px;
    margin-left: auto;
  }
}
</style>